<template>
	<view id="header">
		<view @click="open">
			<text class="title-son">全部门店</text>
			<text class="iconfont icon-xiangxiajiantou"></text>
		</view>
		<view @click="open2">
			<text class="title-son">{{stateName}}</text>
			<text class="iconfont icon-xiangxiajiantou"></text>
		</view>
		<view @click="open3">
			<text class="title-son">{{sortordName}}</text>
			<text class="iconfont icon-xiangxiajiantou"></text>
		</view>
	</view>
	<view id="order">
		<!-- <view class="order-details active1">
			<view class="title">
				<view>
					<text>沉浸区</text>
					<text>12号桌</text>
				</view>
				<button>扫码开门</button>
			</view>
			<view class="content">
				<view class="content-time">
					<text>开始时间：2022-07-20 22:00（周三）</text>
					<text>结束时间：2022-07-21 01:00（周四）</text>
					<text>下单时间：2022-07-18 22:00（周一）</text>
				</view>
				<view class="content-pay active1">
					<text>原价：260元</text>
					<text>抵扣：40元</text>
					<text>实付：220元</text>
				</view>
			</view>
			<view class="header">
				<view class="header-address">
					<text>晓七自习室-世贸店</text>
					<text class="iconfont icon-gaode"></text>
					<text class="iconfont icon-dianhua-yuankuang"></text>
				</view>
				<view class="header-state active1">订单进行中</view>
			</view>
		</view> -->
		<view class="order-details" :class="[v.state==1?'active1':'active2']" v-for="v in order" :key="v.orderId" @click="editFn(v)">
			<view class="title">
				<view>
					<text>{{v.area}}</text>
					<!-- <text>12号桌</text> -->
				</view>
				<button v-if="v.state==1">扫码开门</button>
			</view>
			<view class="content">
				<view class="content-time">
					<text>开始时间：{{timeFn(v.startTime)}}</text>
					<text>结束时间：{{timeFn(v.endTime)}}</text>
					<text>下单时间：{{timeFn(v.createTime)}}</text>
				</view>
				<view class="content-pay" :class="[v.state==1?'active1':'active2']">
					<text>卡券：{{v.couponName}}</text>
					<text>实付：{{v.money}}元</text>
				</view>
			</view>
			<view class="header">
				<view class="header-address">
					<text>晓七自习室-世贸店</text>
					<text class="iconfont icon-gaode"></text>
					<text class="iconfont icon-dianhua-yuankuang"></text>
				</view>
				<view class="header-state" :class="[v.state==1?'active1':'active2']">{{stateFn(v.state)}}</view>
			</view>
		</view>
	</view>
	<!-- <uni-popup  ref="popup" type="bottom">底部弹出 Popup</uni-popup> -->
</template>

<script>
	import { ref } from "vue";
	import store from '../../store/index.js';
	import http from '../../utils/http.js'
	import { onLoad, onShow,} from "@dcloudio/uni-app";
	export default {
		data:function(){
			return {
				order:[],
				userId:0,
				state:0,
				stateName:'全部订单',
				sortord:0,
				sortordName:'默认排序'
			}
		},
	   methods:{
	      stateFn:function(state){
	      	switch(state){
	      		case 6:
	      			return '订单未开始';
	      			break;
	      		case 1:
	      			return '订单进行中';
	      			break;
	      		case 2:
	      			return '用户已取消';
	      			break;
	      		case 3:
	      			return '订单已完成';
	      			break;
	      		case 4:
	      			return '订单已改期';
	      			break;
	      		case 5:
	      			return '订单已失效';
	      			break;
	      	}
	      },
		  timeFn:function(time){
			  return time+'（'+'周'+'日一二三四五六'.charAt(new Date(time).getDay())+'）'
		  },
		  render:function(){
			  if(this.state==0){
				  if(this.sortord==0){
					  http({
					  		url:'/myorder/myorderList',
					  		method:'get',
					  		data:{
					  			"userId": this.userId
					  		}
					  	}).then((res)=>{
					  		if(res.code==0){
					  				this.order=res.data;
					  				// console.log(this.order);
					  			}else{
					  				// console.log(res.msg)
									uni.showToast({
										title: '获取失败',
										icon:'error',
										duration: 2000
									});
					  			}
					  	})
				  }else{
					  http({
					  		url:'/myorder/myorderList',
					  		method:'get',
					  		data:{
					  			"userId": this.userId,
								"sortord":this.sortord
					  		}
					  	}).then((res)=>{
					  		if(res.code==0){
					  				this.order=res.data;
					  				// console.log(this.order);
					  			}else{
					  				// console.log(res.msg)
									uni.showToast({
										title: '获取失败',
										icon:'error',
										duration: 2000
									});
					  			}
					  	})
				  }
			  }else{
				  if(this.sortord==0){
					  http({
					  		url:'/myorder/myorderList',
					  		method:'get',
					  		data:{
					  			"userId": this.userId,
								"state":this.state
					  		}
					  	}).then((res)=>{
					  		if(res.code==0){
					  				this.order=res.data;
					  				// console.log(this.order);
					  			}else{
					  				// console.log(res.msg)
									uni.showToast({
										title: '获取失败',
										icon:'error',
										duration: 2000
									});
					  			}
					  	})
				  }else{
					  http({
					  		url:'/myorder/myorderList',
					  		method:'get',
					  		data:{
					  			"userId": this.userId,
								"state":this.state,
								"sortord":this.sortord
					  		}
					  	}).then((res)=>{
					  		if(res.code==0){
					  				this.order=res.data;
					  				// console.log(this.order);
					  			}else{
					  				// console.log(res.msg)
									uni.showToast({
										title: '获取失败',
										icon:'error',
										duration: 2000
									});
					  			}
					  	})
				  }
			  }
		  },
		  editFn:function(v){
			  if(v.state==6){
				  store.state.order=v;
				  uni.navigateTo({
				  	url:'/pages/OrderNotStarted/OrderNotStarted',
				  })
			  }else if(v.state==1){
				  store.state.order=v;
				  uni.navigateTo({
				  	url:'/pages/OrderInProgress/OrderInProgress',
				  })
			  }
		  },
		  open:function(){
		  	uni.showActionSheet({
		  		itemList: ['全部门店', '晓七自习室-双子塔店', '晓七自习室-世茂国际大厦店'],
		  		success: function (res) {
		  			console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
		  		},
		  		fail: function (res) {
		  			console.log(res.errMsg);
		  		}
		  	})
		      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		      // console.log(popup)
		  	//popup.open('top')
		  },
		  open2:function(){
		  	uni.showActionSheet({
		  		itemList: ['进行中','已取消','已完成','已改期','已失效','未开始'],
		  		success: (res)=>{
					switch(res.tapIndex+1){
						case 1:
							this.state=1
							this.stateName='进行中';
							break;
						case 2:
							this.state=2;
							this.stateName='已取消';
							break;
						case 3:
							this.state=3;
							this.stateName='已完成';
							break;
						case 4:
							this.state=4;
							this.stateName='已改期';
							break;
						case 5:
							this.state=5;
							this.stateName='已失效';
							break;
						case 6:
							this.state=6;
							this.stateName='未开始';
							break;
					}
					this.render()
		  		},
		  		fail: (res)=>{
					this.state=0;
					this.stateName='全部订单';
					this.render()
		  			// console.log(res.errMsg);
		  		}
		  	})
		  },
		  open3:function(){
		  	uni.showActionSheet({
		  		itemList: ['默认排序', '下单时间', '开始时间'],
		  		success: (res)=>{
		  			switch(res.tapIndex){
		  				case 0:
		  					this.sortord=0;
		  					this.sortordName='默认排序';
		  					break;
		  				case 1:
		  					this.sortord=1;
		  					this.sortordName='下单时间';
		  					break;
		  				case 2:
		  					this.sortord=2
		  					this.sortordName='开始时间';
		  					break;
		  			}
		  			this.render()
		  		},
		  		fail: function (res) {
		  			console.log(res.errMsg);
		  		}
		  	})
		  }
	   },
	   mounted:function(){
			this.userId=JSON.parse(JSON.stringify(store.state.userId))
			console.log(this.userId)
			this.render()
		}
	}
	onShow(()=>{
		uni.setTabBarItem({
			index: 0,
			visible:true
		})
		uni.setTabBarItem({
			index: 1,
			visible:true
		})
		uni.setTabBarItem({
			index: 2,
			visible:true
		})
		console.log('12313',this.render())
		
	})
</script>

<style scoped lang="less">
	@import url("../../static/fonts/iconfont.css");
	
	#header {
		height: 80rpx;
		padding: 0 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		& .title-son {
			width: 100rpx;
			overflow: hidden;
			font-size: 28rpx;
			font-weight: bolder;
		}
		& .iconfont{
			font-size: 24rpx;
			margin-left: 14rpx;
			font-weight: bolder;
		}
	}
	#order{
		padding: 28rpx;
		background: #f2f2f2;
		&>.active1{
			background: #eae2d7;
		}
		&>.active2{
			background: #fff;
		}
		&>.order-details{
			height: 358rpx;
			border-radius: 8rpx;
			padding: 36rpx 0 0 0;
			margin-bottom: 40rpx;
			& .title{
				padding: 0 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;
				& text{
					font-size: 28rpx;
					font-weight: bolder;
					margin-right: 10rpx;
				}
				& button{
					background: #c6964f;
					width: 196rpx;
					height: 50rpx;
					border-radius: 25rpx;
					font-size: 28rpx;
					font-weight: bolder;
					color: #fff;
					padding: 0;
					line-height: 50rpx;
					margin: 0;
				}
			}
			& .content{
				padding: 0 28rpx;
				height: 154rpx;
				color: #aaa8a6;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;
				& .content-time{
					height: 154rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
				& .content-pay{
					width: 170rpx;
					padding: 24rpx 0 24rpx 4rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border-radius: 8rpx;
					& .active{
						text-decoration:line-through;
					}
				}
				& .active1{
					background: #e5d7c3;
				}
				& .active2{
					background: #eee;
				}
			}
			& .header{
				padding: 30rpx 56rpx 0 28rpx;
				border-top: 1px solid #f9f4ec;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				& .header-address{
					color: #aaa8a6;
					& text{
						margin-right: 10px;
					}
					& .icon-gaode{
						font-size: 28rpx;
						color: #c6964f;
					}
					& .icon-dianhua-yuankuang{
						font-size: 34rpx;
						color: #c6964f;
					}
				}
				& .header-state{
					font-weight: bolder;
				}
				& .active1{
					color: #c08938;
				}
				& .active2{
					color: #aaa;
				}
			}
		}
	}
</style>
